<template>
  <div>
    <el-empty
      v-if="commentList.length == 0"
      description="没有收到评论"
    ></el-empty>
    <ul>
      <li
        v-for="comment in commentList"
        :key="comment.articleId"
        class="inv-item"
      >
        <el-row>
          <el-col :span="18">
            <div class="hd">
              <img class="inv-img fl" :src="comment.avatarUrl" alt="" />
              <span class="fl">{{ comment.author }}</span>
              <div class="fl clearfix" v-show="1" style="line-height: 40px">
                <img
                  v-if="comment.authorIdentity"
                  class="fl"
                  src="@/assets/认证.png"
                  style="width: 20px; margin: 10px"
                  alt=""
                />
              </div>
            </div>
            <div class="bd">
              <p>{{ comment.context }}</p>
            </div>
            <div class="fd">
              <li class="fl fd-item">
                评论{{ comment.commentCount ? comment.commentCount : 0 }}
              </li>
              <li class="fl fd-item">点赞数{{ comment.goodCount }}</li>
              <li class="fl fd-item">评论时间：{{ comment.postTime }}</li>
            </div>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <p class="comment-post-title">
                  <span style="font-weight: 700">标题:</span>
                  <router-link :to="'/lookpost/' + comment.articleId">{{
                    comment.title ? comment.title : "未知"
                  }}</router-link>
                </p>
              </div>
              <p class="comment-post-summary">
                <span style="font-weight: 700">摘要:</span>{{ comment.summary }}
              </p>
            </el-card>
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
</template>

<script>
import userMessageApi from "@/api/userMessageApi";
export default {
  name: "mycomment",
  data() {
    return {
      commentList: [
        {
          articleId: null,
          author: "gy",
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/gy-avartar.jpg",
          postTime: "2023-02-23 04:45:39",
          title: "今天的操作系统真的太难了",
          summary: "我也觉得今天的操作系统十分的难",
          goodCount: null,
        },
      ],
    };
  },
  created() {
    this.getCommentMessage();
  },
  methods: {
    getCommentMessage() {
      userMessageApi.getCommentMessage().then((response) => {
        this.commentList = response.data;
      });
    },
  },
};
</script>

<style scoped>
/*具体帖子*/
.inv-item {
  min-height: 175px;
  /* background: pink; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 5px 0;
}
/*帖子头部*/
.inv-item .hd {
  height: 40px;
  line-height: 40px;
}
.inv-item .hd span {
  height: 16px;
  line-height: 16px;
  margin: 12px 0;
  padding: 0 8px;
}
.inv-img {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
/*帖子body*/
.inv-item .bd {
  height: 75px;
  margin: 10px 0;
}
.fd-item {
  margin-right: 20px;
}
/* 单行省略必须块级元素 */
.comment-post-title {
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 多行省略可以是非块级元素 */
.comment-post-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /*内容限制的行数 需要几行写几就行*/
}
</style>
